<template>
	<view class="container">
		<u-form :model="form" ref="uForm" class="form">
			<u-form-item label="车位号" :label-style=labelStyle label-width=200>
				<u-input v-model="form.park_num" />
			</u-form-item>
			<u-form-item label="地点" :label-style=labelStyle label-width=200>
				<u-input v-model="form.position" />
			</u-form-item>
			<u-form-item label="开始时间" :label-style=labelStyle label-width=200>
				<u-input v-model="form.start_time" />
			</u-form-item>
			<u-form-item label="结束时间" :label-style=labelStyle label-width=200>
				<u-input v-model="form.end_time" />
			</u-form-item>
		</u-form>
		<view class="selectCar">
			<view class="title">
				选择车辆:
			</view>
			<view class="car">
				<view class="carInfo" :class="isactive==index ? active : '' " v-for="(item,index) in car" :key="index"
					@click="choose(index,item)">
					<view class="carNum">
						{{item.car_num}}
					</view>
					<view class="carColor">
						{{item.color}}
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-button type="primary" class="button" @click="sumbit">立即预约</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isactive: -1,
				active: "active",
				// 车辆信息
				car: [],
				show: false,
				// 预约表单
				form: {
					park_num: '',
					position: '安徽师范大学西南停车场',
					start_time: '开始时间',
					end_time: '结束时间',
					car: '',
				},

				labelStyle: {
					"padding-left": "20rpx"
				},
				iconStyle: {
					width: '35rpx',
					height: '35rpx',
				}
			}
		},
		components: {},
		methods: {
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.form.position = this.actionSheetList[index].text;
			},
			// 获取车辆信息
			getCarList() {
				this.$u.api.getCarList().then(res => {
					if (res.meta.status == 200) {
						this.car = res.data
						// 如果用户车辆为0 跳转到添加车辆页面
						if (this.car.length === 0) {
							this.$refs.uToast.show({
								title: '请先添加车辆',
								type: 'warning',
								url: 'pages/car/addCar',
								duration: 1 * 1000
							})
						}
					}
				})

			},
			// 选择车辆
			choose(index, item) {
				this.isactive = index,
					this.form.car = item.car_num
			},
			// 提交预约
			sumbit() {
				const booking_time = Date.parse(new Date())
				if (this.form.car == '') {
					this.$refs.uToast.show({
						title: '请先选择车辆',
						type: 'warning'
					})
					return
				}
				this.$u.api.startBooking({
					park_num: this.form.park_num,
					car_num: this.form.car,
					start_time: this.form.start_time,
					end_time: this.form.end_time
				}).then(res => {
					console.log(res)
					if (res.meta.status == 200) {
						this.$u.route('pages/stall/success', {
							park_num: this.form.park_num,
							booking_time
						})
					}
				})

			}
		},
		onLoad(option) {
			this.form.park_num = option.selection
			this.form.start_time = option.start_time
			this.form.end_time = option.end_time
		},
		onShow() {
			this.getCarList()
		}
	};
</script>

<style lang="scss" scoped>
	.form {
		margin: 20rpx 5%;
		background-color: #FFFFFF;
		border-radius: 40rpx;
	}

	.selectCar {
		margin-top: 80rpx;

		.title {
			font-size: 40rpx;
			margin-left: 80rpx;
		}

		.car {
			height: 200rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 40rpx;

			.carInfo {
				display: flex;
				flex-flow: column;
				justify-content: space-around;
				align-items: center;
				width: 200rpx;
				height: 120rpx;
				background-color: #FFFFFF;
				border: 2rpx solid $page-color;
				border-radius: 20rpx;
			}

			.active {
				background-color: #19BE6B;
				color: #FFFFFF;
			}
		}

	}

	.button {
		width: 80%;
		height: 100rpx;
		border-radius: 60rpx;
	}
</style>
